<template>
	<div id='dialogue'>
		<input v-model="message" placeholder="edit me">
		<button v-on:click='showtotal()'>showTime</button>
		<button v-on:click='test()'>showTime1</button>
		<!--
		<p>Message is: {{ message }} </p>
		<p> send in {{ time }}</p>
		-->
		<p>{{ total }}</p>
		<p>{{ $store.getters.getcount }}</p>	
	</div>
</template>

<script>
export default {
	name: 'dialogue',
	data : function (){
		return { message: '',
				time: '',
				total: '' }
	},
	methods: {
		showtime: function (){
			this.time = new Date().toLocaleString();
		},
		showtotal: function (){
			this.showtime()
			this.total = "Message is :" + this.message + "Send in " + this.time + 
						"Clicktimes :" + this.$store.getters.getcount;
			//this.$store.commit("increment");
		},
		test: function(){
			//this.$store.commit("increment");	
			console.log("test run1");
			this.$store.dispatch({
					type: 'incrementh',
					amount: 10	
				});
			console.log("test run2");
		},
	}
}
</script>

<style>

#dialogue {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
